<template>
	<div class="home-content">
		<!-- <div class="home-top" > -->
			<!-- <div class="home-top-left">
				<div class="titleBig"> 欢迎来到斜杠大陆 </div>
				<div class="titlesmlle"> 币圈返利网你交易 我补贴 </div>
				<div class="downloadBox">
					<div class="downloadBtn">
						<img @mouseover="mouseoverPhone(require('../common/image/androidQrcodeImg.png'))" class="androidImg" src="@/common/image/sy_android@1x.png" alt="">
						<img @mouseover="mouseoverPhone(require('../common/image/IosQecodeImg.png'))" class="iosImg" src="@/common/image/sy_ios@1x.png" alt="">
					</div>
					<div class="downloadQrcode">
						<div class="downloadQrcodeBox">
							<img class="downloadQrcodeImg" :src="qrcodeImg"></img>
						</div>
					</div>
				</div>
			</div>
			<div class="home-top-right">
				<img src="@/common/image/phoneApp.png" alt="">
			</div> -->
		<!-- </div> -->
		<!--<div>
			<div class="hezuoBox" :style="{'background-image':'url(' + sy_bg3 + ')','background-repeat':'no-repeat','background-size':'cover' }">
				<div></div>
				<div class="btnClass">
					<div @click="dialogVisible=true">我是广告商</div>
					<div @click="dialogVisible=true">交易所</div>
					<div @click="dialogVisible=true">我是交易员</div>
				</div>
			</div>
		</div> -->
		<div class="home-active">
			<div class="activeBox">
				<img src="@/common/image/sy_bt1@1x.png" alt="">
			</div>
			<div class="activeListBox" :class="yuansudonghua?'yuansuClass':''" ref="scrollOne">
				<img class="activeItem" src="../common/image/sy_bg4@1x.png" alt="">
				<!-- <div class="activeItem" >
					<img class="activeItemImage" src="@/common/image/firstLine.png"></img>
				</div>
				<div class="activeItem" >
					<img class="activeItemImage" src="@/common/image/twoLine.png"></img>
				</div> -->
			</div>
			<div class="activeBox" style="margin-top: 180px !important;">
				<img src="@/common/image/sy_bt2@1x.png" alt="">
			</div>
			<div class="advantageList">
				<div class="advantageItem" v-for="(item,index) in advantageList" :key="index"
					@mouseover="selectStyle(item,index)"
					:class="item.active?'active':'activeout'" 
					@mouseout="outStyle(item)" 
				>
					<img style="width: 300px; height: 377px;" :src="item.imageUrl" alt="">
				</div>
			</div>
		</div>
		<div class="sy_bg5">
			<img src="@/common/image/sy_bg5@1x.png" alt="">
		</div>
		<div class="DownloadChannels">
			<div class=" activeBoxs" style="margin-top: 100px !important;margin-bottom: 100px !important;">
				<img src="@/common/image/sy_bt3@1x.png" alt="">
			</div>
			<div class="DownloadChannelsList">
				<div class="DownloadChannelsListItem">
					<img class="DownloadImageItem2" src="@/common/image/编组3@1x.png" alt="">
				</div>
				<div class="DownloadChannelsListItem">
					<img class="DownloadImageItem3" src="@/common/image/编组@1x.png" alt="">
				</div>
				<div class="DownloadChannelsListItem">
					<img class="DownloadImageItem1" src="@/common/image/编组2@1x.png" alt="">
				</div>
			</div>
		</div>
		<footerPage></footerPage>
		<el-dialog :show-close="false" :visible.sync="dialogVisible" width="30%" top="30vh">
			<span slot="title" class="dialog-footer">
				<span>请提交您的联系方式</span>
				<img @click="dialogVisible=false" src="@/common/image/tc_sc@1x.png" alt="">
			</span>
		  <div class="inputBox">
		  	<input @input="inputChange" v-model.number="phone" placeholder="请输入您的手机号"></input>
		  </div>
		  <div class="input-bottomtext">提交后我们工作人员会尽快联系您的，请耐心等待～</div>
		  <div :style="btnFlag?'background:#1F2E75;':''" class="dialog-footer-center" @click="submit()"> 
				提交
		  </div>
		</el-dialog>
		<div class="submitModel">
			<el-dialog width="254px" height="254px" top="30vh" :show-close="false" :visible.sync="dialogVisible2">
			  <div style="text-align: center;padding-bottom: 20px;">
				  <img src="@/common/image/tc_tscg@1x.png" alt="">
				  <div style="color: #333333; font-size: 20px;">提交成功</div>
			  </div>
			</el-dialog>
		</div>
	</div>
</template>
<script>
	import footerPage from '../components/footer'
	import activeCenter from '../components/activeCenter'
	export default {
		data() {
			return {
				qrcodeImg:require('@/common/image/androidQrcodeImg.png'),
				flagImage:false,
				dialogVisible2:false,
				btnFlag:false,
				phone:"",
				dialogVisible:false,
				yuansudonghua:false,
				scroll:"",
				scrollOneHeight:false,
				topBgImage:require("@/common/image/sy_banner2@1x.png"),
				sy_bg3:require("@/common/image/sy_bg3@1x.png"),
				bgImage:require("@/common/image/sy_bg4@1x.png"),
				advantageList:[
					
					{
						imageUrl:require("@/common/image/bianzu23@1x.png"),
					},
					{
						imageUrl:require("@/common/image/bianzu24@1x.png"),
					},
					{
						imageUrl:require("@/common/image/bianzu25@1x.png"),
					},
					
				],
				activeList: [
					{
						PlaceImgUrl:require("@/common/image/sy_01@1x.png"),
					},
					{
						PlaceImgUrl:require("@/common/image/sy_02@1x.png"),
					},
					{
						PlaceImgUrl:require("@/common/image/sy_03@1x.png"),
					},
					{
						PlaceImgUrl:require("@/common/image/sy_04@1x.png"),
					},
					{
						PlaceImgUrl:require("@/common/image/sy_05@1x.png"),
					},
					{
						PlaceImgUrl:require("@/common/image/sy_06@1x.png"),
					},
				],
				
			}
		},
		components: {
			footerPage,
			activeCenter
		},
		created() {
			
		},
		mounted(){
		    this.$nextTick(()=>{ 
					 window.addEventListener("scroll",this.handleScroll); 
		    })
		},
		methods: {
			mouseoverPhone(e){
				console.log(e)
				this.qrcodeImg = e
			},
			submit(){
				if(!this.btnFlag){
					this.$message.warning('请先输入或输入正确的手机号')
					return
				}
				this.dialogVisible2=true
				this.btnFlag=false
				this.dialogVisible=false
				setTimeout(()=>{
					this.dialogVisible2=false
				},1000)
			},
			inputChange(e){
				var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;
				if(myreg.test(e.target.value)){
					this.btnFlag=true
				}else{
					this.btnFlag=false
				}
			},
			 handleScroll(){
				 //获取滚动时的高度
				         let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
				         if (scrollTop >= 400) {
							this.yuansudonghua=true
				         }
			    },
			selectStyle(item,index) {
				var _this = this;
				this.$nextTick(function() {
					this.activeList.forEach(function(item) {
						_this.$set(item, 'active', false);
					});
					this.$set(item, 'active', true);
				});
			},
			outStyle(item) {
				this.$set(item, 'active', false);
			}
		}

	}
</script>
<style lang="less" scoped>
	.activeBoxs{
		// margin-top: 100px!important;
		// margin: 0 auto;
		text-align: center;
	}
	.el-dialog{
		border-radius: 10px;
	}
	.el-dialog__wrapper{
		border-radius: 10px;
	}
	.activeItem:nth-child(1){
		top: 20%;
		left:10%;
	}
	.activeItem:nth-child(2){
		bottom:10%;
		left:10%;
	}
	.activeout{
		transform: rotate(360deg);
		margin-top: 0px;
		transition: background-color .3s ease;
		transition: margin-top 1s ease
	}
	.active{
		transform: rotate(360deg);
		margin-top: -50px;
		transition: background-color .3s ease;
		transition: margin-top 1s ease
	}
	.activeBox {
		width: 100% !important;
		text-align: center;
		margin-top:150px;
		margin-bottom: 54px;
	}
	.activeBox:first-child {
		width: 100% !important;
		text-align: center;
		margin-top:150px;
		margin-bottom:0px;
	}
	@keyframes topDh{
		0% {
			margin-top: 200px;
		}
		100%{
			margin-top: 0px;
		}
		
	}
	.yuansuClass{
		animation: topDh 5s;
		-moz-animation: topDh 5s;	/* Firefox */
		-webkit-animation: topDh 5s;	/* Safari 和 Chrome */
		-o-animation: topDh 5s;
		animation-fill-mode:forwards;
	}
	.DownloadImageItem1:hover{
		width: 300px;
		height: 310px;
	}
	.DownloadChannels{
		// width: 100%;
		padding-top: 100px !important;
		height:860px;
		background: url(../common/image/sy_bg6@1x.png) no-repeat;
	}
	.DownloadChannelsList{
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 300px;
		.DownloadChannelsListItem{
			flex: 1;
			width: 260px;
			height: 278px;
			text-align: center;
			margin-top: 20px;
			>img{
				cursor:pointer; 
				width: 260px;
				height: 268px;
			}
			.DownloadImageItem1:hover{
				width: 300px;
				height: 310px;
				margin-top: -20px;
			}
			.DownloadImageItem2:hover{
				width: 300px;
				height: 310px;
				margin-top: -20px;
			}
			.DownloadImageItem3:hover{
				width: 300px;
				height: 310px;
				margin-top: -20px;
			}
		}
		
	}
	.sy_bg5{
		width: 100% !important;
		padding: 0 !important;
		>img{
			width: 100%;
		}
	}
	// .downloadBox{
	// 	width: 100%;
	// 	height: 122px;
	// 	display: flex;
	// 	>div{
	// 		flex: 1;
	// 	}
	// 	.downloadBtn{
	// 		padding-top: 40px;
	// 		flex: 0.6;
	// 		width: 100%;	
	// 		>img{
	// 			margin-top: 20px;
	// 			cursor:pointer;
	// 		}
	// 		.androidImg:hover{
	// 			content: url(../common/image/编组 17备份@1x.png);
	// 		}
	// 		.iosImg:hover{
	// 			content: url(../common/image/sy_ios_xz@1x.png);
	// 		}
	// 	}
		
	// }
	.androidImg:hover,{
		// content: url(../common/image/编组 17备份@1x.png);
	}
	.iosImg:hover{
		// content: url(../common/image/sy_ios_xz@1x.png);
	}
	.downloadQrcode{
		.downloadQrcodeBox{
			margin-top: 30px;
			border-radius: 10px;
			width: 188px !important;
			height: 188px !important;
			background: red;
			background: url(../common/image/erweimabeijing.png);
			background-size: cover;
			border-radius: 20px ;
			img{
				border-radius: 20px ;
				width: 100%;
				height: 100%;
			}
		}
	}
	.btnClass{
		>div{
			padding: 0.5vw 1vh;
			border:1px solid #90B7FF;
			color: #90B7FF;
			border-radius: 6px;
			margin-right: 1vw;
			cursor:pointer;
		}
		>div:hover{
			z-index: 9999999;
			background:#436FFF;
			border:1px solid #436FFF;
			color: #FFFFFF;
		}
	
	}
	.activeItemImage{
		// width: 100%;
	}
	.home-content{
		width: 100%;
		>div{
		padding: 0px 18.75%;
		}
	}
	.advantageList{
		width: 100%;
		display: flex;
		align-items:center;
		justify-content:space-between;
		height: 400px;
		margin-bottom: 111px;
		
		.advantageItem{
			text-align: center;
			// flex: 1;
			width: 300px;
			height: 377px;
			height: 390px;
			// padding:2vh 2vw;
		}
	}
	.hezuoBox {
		// padding: 60px 0px !important;
		display: flex;
		align-items: center;
		// width: 1200px;
		width: 100%;
		height: 200px;
		margin:0 auto;
		margin-top: -100px;
		background: blue;
		opacity: 0.9999;
		border-radius: 20px;
		padding: 0px 5%;
		justify-content: space-between;
		>div {
			display: flex;
			justify-content: space-between;
		}
	}
	.active{
		-webkit-animation: itemBox 2s;
		/* Safari 和 Chrome */
		animation-fill-mode: forwards;
	}
	.home-content {
		widows: 100%;
		>div {
			padding: 0px 18.75%;
		}
		.home-active {
			width: 100%;
			.activeListBox {
				width: 100% !important;
				margin-top:200px;
				margin-bottom:100px;
				padding: 0px !important;
				height: 678px !important;
				// background: url(../common/image/sy_bg4@1x.png) no-repeat;
				// background-size: cover;
				// background-position: ;
				.activeItem {
					width: 100%;
					height: 100%;
				}
			}
		}
		.home-top {
			// width: 100%;
			// height:692px !important;
			// z-index: -2;
			// padding-top: 180px;
			// .home-top-left {
			// 	flex: 1.2;
			// 	width: 100%;
			// 	height: 100%;
			// 	.titleBig {
			// 		font-size: 6vmin;
			// 		font-weight: 800;
			// 		color: #ffffff;
			// 	}
			// 	.titlesmlle {
			// 		font-size: 3vmin;
			// 		font-weight: 500;
			// 		color: #ffffff;
			// 	}
			// }
			// .home-top-right {
			// 	margin-bottom: -100px;
			// 	flex: 1;
			// 	height: 100%;
			// 	display: flex;
			// 	// justify-content: flex-end;
			// 	>img {
			// 		margin-top: -100px !important;
			// 		width: 80px;
			// 		height: 80px;
			// 		-webkit-animation: myfirst 2s;
			// 		/* Safari 和 Chrome */
			// 		animation-fill-mode: forwards;
			// 	}
			// }
		}
	}
	
			@keyframes titTransparent {
					0% {
						width: 0;
					}
			}		
			@keyframes typing { 
		        from { width: 0; } 
		    } 
		    @keyframes caret { 
		        50% { border-color: transparent; } 
		    }
			  @keyframes typing{
			    from{ width: 0 }
			  }
			  @-webkit-keyframes typing{
			    from{ width: 0 }
			  }
			  @keyframes caret{
			    50%{
			      border-color: currentColor;
			    }
			  }
			  @-webkit-keyframes caret{
			    50%{
			      border-color: currentColor;
			    }
			  }
	        .home-top-left {
	            position: relative;
	            float: left;
	            font-size:150%;
	        }
	        .titleBig{
					width: 14px; 
				    overflow: hidden;
				    white-space: nowrap;
				    // border-right: .05em solid transparent;
				    animation: typing 4s steps(14),caret 1s steps(1) infinite;
	        }
			.titlesmlle{
				margin-top: 20px;
				width: 80%;
				overflow: hidden;
				white-space: nowrap;
				font-size: 20px;
				animation: titTransparent steps(100) 2.8s, guodu steps(1) 1s infinite;
			}
			@keyframes titTransparent {
						0% {
							opacity: 0.1;
						}
						10%{
							opacity: 0.2;
						}
						20%{
							opacity: 0.3;
						}
						30%{
							opacity: 0.4;
						}
						40%{
							opacity: 0.5;
						}
						50%{
							opacity: 0.6;
						}
						60%{
							opacity: 0.7;
						}
						70%{
							opacity: 0.8;
						}
						80%{
							opacity: 0.9;
						}
			}	
		@keyframes myfirst {
			0% {
				width: 410px;
				height: 529px;
				margin-top: -40px;
			}
			100% {
				width: 410px;
				height: 529px;
				margin-top: 0px;
			}
		}
	.inputBox{		width: 100% !important;		height: 32px;		background: #FAFAFA;		margin-top: 46px;		margin-bottom: 7px;		input{			background: #FAFAFA;			width: 100% !important;			height: 32px;			border: none !important;			padding: 9px;			outline:none;		}	}		.submitModel{
		.el-dialog{
			width: 254px !important;
			height: 196px !important;
			padding: 0 !important;
			padding-top: 16px !important;
		}
	}
	
	.el-dialog__body{
		padding-top: 0 !important;
	}
	.el-dialog{
		border-radius: 10px;
		padding: 32px 35px !important;
		width: 644px !important;
		height: 390px !important;
	}
	.el-dialog__header{
		position: relative;
		img{
			position: absolute;
			top: -20%;
			right: 0%;
			width: 28px;
			height: 28px;
			cursor:pointer;
		}
	}
	.el-dialog__body{
		border-radius: 0px 0px 80px 80px !important;
	}
	.dialog-footer-center {
		width: 100%;
		margin-top:46px !important; 
		height: 64px;
		line-height: 64px;
		text-align: center;
		background: #CECECE;
		cursor: pointer;
		font-size: 24px;
		color: #FFFFFF;
		margin-top: 38px;
	}
	.dialog-footer{
		font-size: 24px;
		color: #333333;
		font-weight: 600;
	}
	.inputBox{
		width: 100% !important;
		height:64px;
		background: #FAFAFA;
		margin-top: 28px;
		margin-bottom: 14px;
		input{
			background: #FAFAFA;
			width: 100% !important;
			height: 64px;
			border: none !important;
			padding: 9px;
			outline:none;
		}
	}
</style>
